<template>
  <div class="login_container">
      <div class="login_wrapper">
          <el-input v-model="username" class="input_container" placeholder="用户名"/>
          <el-input v-model="password" class="input_container" placeholder="密码"/>
          <el-button class="button_container" @click="goNext">立即登录</el-button>
      </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
    data(){
        return{
            username:"",
            password:""
        }
    },
    methods:{
        goNext(){
            this.$axios.post("http://ceshi5.dishait.cn/admin/login",{username:this.username,password:this.password}).then(res=>{
                // console.log(res.data.data.token)
                localStorage.setItem("token",res.data.data.token)
                Message("登录成功")
                this.$router.push("/");
            }).catch(err=>{
                Message("用户名或密码输入有误，请重新输入!!!")
                this.username = "";
                this.password = "";
            })
        }
    }
}
</script>

<style scoped>
.login_container
{
    width: 100vw;
    height: 100vh;
    background-color: lightgray;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.login_wrapper
{
    height: 250px;
    width: 400px;
    background-color: skyblue;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
}

.input_container
{
    margin-top: 30px;
    width: 70%;
}

.button_container
{
    margin-top: 30px;
    width: 70%;
}

</style>